<template>
    <div>
        <div class="p-[20px] pb-[10px]">
            <el-carousel trigger="click" height="360px">
                <el-carousel-item v-for="item in homeData.homeBanner" :key="item">
                    <NuxtLink :to="item.link">
                        <el-image :src="getUrl(item.image_url)" fit="contain"
                            class="w-full h-full bg-white overflow-hidden" alt="轮播图" />
                    </NuxtLink>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="p-[20px] pt-0">
            <comTitle title="资讯列表" link="/article" />
        </div>
        <div class="p-[20px] pt-0">
            <ArticleList :list="homeData.cms" />
        </div>
        <div class="p-[20px] pt-0">
            <NuxtLink :to="homeData.advertImage.home.link">
                <el-image v-if="homeData.advertImage.home?.image_url" :src="getUrl(homeData.advertImage.home?.image_url)" width="100%" alt="广告图" />
            </NuxtLink>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { getHomeData, getHomeStyle } from "@/api/home";
import { getUrl } from "@/utils/common";

const homeData = reactive({
    homeBanner: [],
    recommendBanner: [],
    advertImage: {
        home: {} as any,
        recommend: {} as any,
    },
    cms: [],
});

const getData = async () => {
    const res_data = await getHomeData({ type: 2 });
    homeData.cms = res_data.cms;

    const res_style = await getHomeStyle({ type: 2 });
    homeData.homeBanner = res_style.homeBanner.list;
    homeData.recommendBanner = res_style.recommendBanner.list;
    homeData.advertImage.home = res_style.advertImage.home;
    homeData.advertImage.recommend = res_style.advertImage.recommend;
};

onMounted(() => {
    getData();
});
</script>

<style lang="scss" scoped>
.main-container {
    width: 100%;
    max-width: 1200px;
    margin: 10px auto;
    display: flex;
    justify-content: space-between;

    .content {
        width: 100%;
        max-width: 820px;
        background: #fff;
        box-shadow: 0 0 20px rgb(210 211 216 / 30%);
        border-radius: 5px;
    }

    .side-bar {
        width: 385px;
        border-radius: 5px;
        padding: 20px;
        margin-left: 10px;
        box-shadow: 0 0 20px rgb(210 211 216 / 30%);
        background: #fff;
    }
}
</style>
